<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
import { onMounted, toRaw, reactive } from 'vue';
const emit = defineEmits(['changePosition'])
let map = shallowRef(null);// 在setup中声明map变量
let markers = []; // 用于存储所有标记的数组
const initMap = () => {
  AMapLoader.load({
    key: "c94b6ca843e98adc5fb5c22446617757",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Driving"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    map = new AMap.Map("container", {  //设置地图容器id
      viewMode: "3D",    //是否为3D地图模式
      zoom: 10,
      // zooms: [2, 22],        //初始化地图级别
      center: [105.602725, 37.076636], //初始化地图中心点位置
    });
    let positionArr = [[113.357224, 34.977186]];
    for (let item of positionArr) {
      let marker = new AMap.Marker({
        position: [item[0], item[1]],
      });
      markers.push(marker);
      map.add(marker);
    }

    // 添加地图点击事件监听器
    map.on("click", (event) => {
      const lngLat = event.lnglat;
      // 经纬度
      // console.log("Clicked at:", lngLat.lat, lngLat.lng);
      emit('changePosition', `${lngLat.lat},${lngLat.lng}`)
      // 移除之前的标记
      markers.forEach((marker) => marker.setMap(null));

      // 在点击位置添加新的标记
      const newMarker = new AMap.Marker({
        position: [lngLat.lng, lngLat.lat],
      });
      markers.push(newMarker);
      map.add(newMarker);
    })
  }).catch(e => {
    console.log(e);
  })
}
// const mapInfo = (event) => {
//   console.log(event);
// }
onMounted(() => {
  initMap()
})
</script>

<template>
  <!-- @click="mapInfo" -->
  <div id="container"></div>
</template>



<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>